<template>
  <div class="dify-chat-example">
    <h2>Dify聊天示例</h2>

    <div class="layout-container">
      <div class="chat-container">
        <DifyChat
          :apiKey="apiKey"
          :apiBase="apiBase"
          :inputs="inputs"
          @message-end="handleMessageEnd"
          @json-extracted="handleJsonExtracted"
        />
      </div>

      <div class="data-container">
        <div v-if="extractedJson" class="json-container">
          <h3>提取的JSON数据</h3>
          <pre class="json-box">{{ JSON.stringify(extractedJson, null, 2) }}</pre>

          <!-- 可视化数据示例：如果提取的数据有特定字段，可以显示特定UI -->
          <div v-if="extractedJson.chart" class="visualization">
            <h4>数据可视化</h4>
            <div class="chart-placeholder">
              <!-- 这里可以放置图表组件 -->
              图表数据已提取，可以在这里渲染图表
            </div>
          </div>

          <div v-if="extractedJson.table" class="visualization">
            <h4>表格数据</h4>
            <div class="table-container">
              <!-- 这里可以放置表格组件 -->
              表格数据已提取，可以在这里渲染表格
            </div>
          </div>
        </div>

        <div v-if="lastResult" class="result-container">
          <h3>最近一次会话结果</h3>
          <div class="result-content">
            <p><strong>消息内容:</strong></p>
            <div class="message-box">{{ lastResult.message }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="tips">
      <h3>使用提示</h3>
      <p>尝试发送包含以下关键词的问题：</p>
      <ul>
        <li>「以JSON格式返回数据」</li>
        <li>「生成一个包含...的JSON」</li>
        <li>「以表格形式展示...」</li>
        <li>「用图表分析...」</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DifyChat from '@/components/DifyChat'

const apiKey = import.meta.env.VITE_DIFY_API_KEY || 'your-dify-api-key'
const apiBase = import.meta.env.VITE_DIFY_API_BASE || 'https://api.dify.ai/v1'

// 可选的输入参数示例
const inputs = ref({
  // 示例自定义参数
  // context: '这是一些上下文信息'
})

// 存储最近一次会话结果
const lastResult = ref(null)

// 存储提取的JSON数据
const extractedJson = ref(null)

// 处理会话结束事件
const handleMessageEnd = (result) => {
  console.log('聊天会话结束，收到结果:', result)

  // 保存结果到组件状态
  lastResult.value = {
    message: result.message,
    response: result.response
  }

  // 如果结果中有提取的JSON但之前没有通过json-extracted事件获取到
  // 这是一个备用机制，确保总能获取到JSON数据
  if (result.extractedJson && !extractedJson.value) {
    extractedJson.value = result.extractedJson
  }
}

// 处理提取到的JSON数据
const handleJsonExtracted = (jsonData) => {
  console.log('提取到JSON数据:', jsonData)
  extractedJson.value = jsonData

  // 在这里可以立即处理JSON数据
  // 例如更新图表、数据分析等
}
</script>

<style scoped>
.dify-chat-example {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.layout-container {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.chat-container {
  flex: 1;
  height: 600px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.data-container {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.json-container,
.result-container {
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.json-box {
  padding: 15px;
  background-color: #2b2b2b;
  color: #f8f8f2;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
}

.message-box {
  padding: 15px;
  background-color: white;
  border-radius: 4px;
  margin-bottom: 20px;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

.visualization {
  margin-top: 15px;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
}

.chart-placeholder,
.table-container {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  color: #666;
}

.tips {
  background-color: #f0f7ff;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.tips ul {
  padding-left: 20px;
}

.tips li {
  margin-bottom: 5px;
}
</style>
